<template>
  <div id="user">
    <div class="userContent">
      <div class="userContentLeft">
        <div class="userBasicInfo">
          <img :src="$globalImageUrl + userInfo.avatar" alt="">
          <p>{{userInfo.userName}}</p>
          <!-- <p>uid: {{userInfo.userId}}</p> -->
          <p>身份：{{userTypeText(userInfo.userType)}}</p>
          <p>简介：{{userInfo.introduce}}</p>
        </div>
        <div class="userRests">
          <ul>
            <li :class="{active: infoConIndex === 0}" @click="onTabInfoCon(0, '/userMaterial')">我的资料 <span></span></li>
            <li :class="{active: infoConIndex === 1}" @click="onTabInfoCon(1, '/userMessage')">我的消息 <span></span></li>
            <li :class="{active: infoConIndex === 2}" @click="onTabInfoCon(2, '/userSecure')">账号安全 <span></span></li>
            <li :class="{active: infoConIndex === 3}" @click="onTabInfoCon(3, '/userWorks')" v-show="userInfo.userType === 1 || userInfo.userType === 2">我的作品 <span></span></li>
            <li :class="{active: infoConIndex === 4}" @click="onTabInfoCon(4, '/userApprove')">我的认证 <span></span></li>
            <li :class="{active: infoConIndex === 5}" @click="onTabInfoCon(5, '/userAppraise')">我的评论 <span></span></li>
            <li :class="{active: infoConIndex === 6}" @click="onTabInfoCon(6, '/userGaze')">我的关注 <span></span></li>
            <li :class="{active: infoConIndex === 7}" @click="onTabInfoCon(7, '/userCollect')">我的收藏 <span></span></li>
            <li :class="{active: infoConIndex === 8}" @click="onTabInfoCon(8, '/userAchievement')">我的成就 <span></span></li>
            <li :class="{active: infoConIndex === 9}" @click="onTabInfoCon(9, '/userTask')">我的任务 <span></span></li>
          </ul>
        </div>
      </div>
      <div class="userContentRight">
        <div class="userCenter">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'user',
  data () {
    return {
      infoConIndex: 0,
      infoConPath: ['/userMaterial', '/userMessage', '/userSecure', '/userWorks', '/userApprove', '/userAppraise', '/userGaze', '/userCollect', '/userAchievement', '/userTask'],
      userInfo: this.$store.state.user.userInfo
    }
  },
  created () {
    if (this.infoConPath.indexOf(this.$route.path) !== -1) {
      this.infoConIndex = this.infoConPath.indexOf(this.$route.path)
    }
  },
  methods: {
    onTabInfoCon (val, path) {
      this.infoConIndex = val
      if (path !== this.$route.path) {
        this.jumpTo(path)
      }
    }
  },
  watch: {
    $route (to, from) {
      if (this.infoConPath.indexOf(to.path) !== -1) {
        this.infoConIndex = this.infoConPath.indexOf(to.path)
      }
    }
  }
}
</script>

<style lang="less" scoped>
#user{
  .userContent{
    width: 1200px;
    margin: auto;
    padding: .5rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    .userContentLeft{
      width: 25%;
      padding-right: .2rem;
      .userBasicInfo{
        padding: .2rem;
        background-color: #fff;
        img{
          width: 1rem;
          height: 1rem;
          display: block;
          margin: auto;
          border-radius: 500px;
        }
        p{
          font-size: 0.14rem;
          color: #333;
          text-align: center;
          line-height: 0.22rem;
          padding-top: .1rem;
        }
      }
      .userRests{
        margin-top: .2rem;
        background-color: #fff;
        ul{
          li{
            font-size: .16rem;
            color: #333;
            line-height: .5rem;
            font-weight: 500;
            padding-left: .4rem;
          }
          li.active {
            color: #15a29c;
            background-color: #F7FCFF;
            position: relative;
            span{
              position: absolute;
              left: 0;
              top: 0;
              display: inline-block;
              width: .03rem;
              height: 100%;
              background-color: #15A29C;
            }
          }
        }
      }
    }
    .userContentRight{
      width: 75%;
      .userCenter{
        background-color: #fff;
      }
    }
  }
}
</style>
